<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业展示</title>

    <!-- 引入头文件 -->
    <include file="claim" />
    
    <!-- 开始部分页面独有样式 -->
    <style>
        textarea {
            resize: none;
        }
    </style>
    <!-- 结束页面独有样式 -->
</head>
<body>
<div class="container">
    
<!-- 引入巨幕文件 -->
<include file="jumbotron" />

<!-- 引入导航文件 -->
<include file="nav" />

<!-- 正文开始 -->
<div class="row clearfix">
    <div class="col-md-9 column">
        <form role="form" action="{:U('/home/company/msg')}" method="post">
            <div class="form-group">
                 <label for="name">称&#160;&#160;&#160;&#160;呼</label><input class="form-control" id="name" name="name" type="text" />
            </div>
            <div class="form-group">
                 <label for="contact">邮&#160;&#160;&#160;&#160;箱</label><input class="form-control" id="contact" name="contact" type="text" />
            </div>
            <div class="form-group">
                <label for="content">请留下您宝贵的建议</label><textarea id="content" class="form-control" name="content" rows="8"></textarea>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
</div>
<!-- 正文结束 -->

<!-- 引入页脚文件 -->
<include file="footer" />

</div>
</body>
    
<!-- 引入尾文件 -->
<include file="js" />

<!-- 页面独有脚本 -->
<script>
    // 检索导航栏点击状态并更改为当前页
    $('li:contains(意见留言)')[0].className = 'active';
    //检测所填3项是否为空
    // contact = $('#contact'), content = $('#content');
    //称呼
    $('#name').blur(function () 
        {
            if ($('#name').val() == '') {
                $('#name').css('borderColor', 'red');
                $('#name').css('boxShadow', '0 0 5px red');
                $('#name').after('<span style="color:red;">总该让我们知道您贵姓吧！</span>');
            }
            $('#name').focus(function () 
                {
                    $('#name').css('borderColor', '');
                    $('#name').css('boxShadow', '');
                    $('#name+span').remove();
                });
        });
    //邮箱
    $('#contact').blur(function ()
        {
            var patt = /^\w+@[\w+\.]+\w+$/;
            if ($('#contact').val() == '') {
                $('#contact').css('borderColor', 'red');
                $('#contact').css('boxShadow', '0 0 5px red');
                $('#contact').after('<span style="color:red;">怎么才能联系到您呢，大神！</span>');
            } else if (!patt.test($('#contact').val())) {
                $('#contact').css('borderColor', 'red');
                $('#contact').css('boxShadow', '0 0 5px red');
                $('#contact').after('<span style="color:red;">邮箱格式不正确啊！</span>');
            }
            $('#contact').focus(function () 
                {
                    $('#contact').css('borderColor', '');
                    $('#contact').css('boxShadow', '');
                    $('#contact+span').remove();
                });
        });
    //内容
    $('#content').blur(function () 
        {
            if ($('#content').val() == '') {
                $('#content').css('borderColor', 'red');
                $('#content').css('boxShadow', '0 0 5px red');
                $('#content').after('<span style="color:red;">都到这里了，随便写点呗！</span>');
            }
            $('#content').focus(function () 
                {
                    $('#content').css('borderColor', '');
                    $('#content').css('boxShadow', '');
                    $('#content+span').remove();
                });
        });
    //提交
    $('form:nth(1)').submit(function ()
        {
            if ($('#name').val() == '' || $('#email').val() == '' || $('#content').val() == '') {
                return false;
            }
        });
</script>

</html>